<script setup>
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import jbfa from "@/router/jbfa";
import kqzy from "@/router/kqzy";
import pzzh from "@/router/pzzh";
import ryfh from "@/router/ryfh";
import zymb from "@/router/zymb";
import qbxx from "@/router/qbxx";
import zhbz from "@/router/zhbz";
import zzgz from "@/router/zzgz";
import { onMounted } from "vue";

// 处理表格数据 系统名 路由
const changeTableData = (name, arr) => {
  const data = [];
  arr[0].children.forEach((x) => {
    // 一级菜单x 二级y
    if (x.children) {
      x.children.forEach((y) => {
        data.push({
          c1: name,
          c2: x.title,
          c3: y.title,
          c4: "",
          edit: false,
        });
      });
    } else {
      data.push({
        c1: name,
        c2: x.title,
        c3: "",
        c4: "",
        edit: false,
      });
    }
  });
  return data;
};

const obj = {
  基本方案: changeTableData("基本方案", jbfa),
  跨区支援行动计划: changeTableData("跨区支援行动计划", kqzy),
  平战转换行动计划: changeTableData("平战转换行动计划", pzzh),
  人员防护行动计划: changeTableData("人员防护行动计划", ryfh),
  重要目标防护行动计划: changeTableData("重要目标防护行动计划", zymb),
  情报信息保障计划: changeTableData("情报信息保障计划", qbxx),
  综合保障计划: changeTableData("综合保障计划", zhbz),
  政治工作计划: changeTableData("政治工作计划", zzgz),
};

const options = [
  {
    label: "基本方案",
    value: "基本方案",
  },
  {
    label: "跨区支援行动计划",
    value: "跨区支援行动计划",
  },
  {
    label: "平战转换行动计划",
    value: "平战转换行动计划",
  },
  {
    label: "人员防护行动计划",
    value: "人员防护行动计划",
  },
  {
    label: "重要目标防护行动计划",
    value: "重要目标防护行动计划",
  },
  {
    label: "情报信息保障计划",
    value: "情报信息保障计划",
  },
  {
    label: "综合保障计划",
    value: "综合保障计划",
  },
  {
    label: "政治工作计划",
    value: "政治工作计划",
  },
];

const value = ref("基本方案");
const tableData = ref([]);
const tableRef = ref();

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    // 与前一个值对比，相等为合并行，不相等为当前类型第一行
    if (row.c1 !== tableData.value[rowIndex - 1]?.c1) {
      let rowspan = 0;
      tableData.value.forEach((x) => {
        if (row.c1 === x.c1) rowspan++;
      });
      return [rowspan, 1];
    } else {
      return [0, 0];
    }
  } else if (columnIndex === 1) {
    if (row.c2 !== tableData.value[rowIndex - 1]?.c2) {
      let rowspan = 0;
      tableData.value.forEach((x) => {
        if (row.c2 === x.c2) rowspan++;
      });
      const colspan = row.c3 ? 1 : 2;
      return [rowspan, colspan];
    } else {
      return [0, 0];
    }
  } else if (columnIndex === 2) {
    return row.c3 ? [1, 1] : [0, 0];
  }
};

const handleChange = () => {
  tableData.value = obj[value.value];
};

const rowDblclick = (index) => {
  tableData.value[index].edit = true;
};

const hiddenTextarea = (index) => {
  tableData.value[index].edit = false;
};

const exportExcel = () => {
  ElMessageBox.confirm(`确定要导出 ${value.value} 吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  })
    .then(() => {
      const table = tableRef.value.$el;
      const wb = XLSX.utils.table_to_book(table, {
        raw: true,
      });
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        `${value.value}.xlsx`
      );
    })
    .catch(() => {});
};

onMounted(() => {
  handleChange();
});
</script>
<template>
  <div class="excel">
    <div class="flex-align-center">
      <el-select v-model="value" style="width: 240px" @change="handleChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button class="left-10" type="success" @click="exportExcel"
        >导出Excel</el-button
      >
    </div>

    <el-table
      id="table"
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
      :span-method="arraySpanMethod"
      ref="tableRef"
    >
      <el-table-column prop="c1" label="方案名" width="100" align="center" />
      <el-table-column prop="c2" label="一级菜单" width="180" align="center" />
      <el-table-column prop="c3" label="二级菜单" width="240" align="center" />
      <el-table-column prop="c4" label="内容" align="center">
        <template #default="{ row, $index }">
          <div class="no-edit" v-if="!row.edit" @dblclick="rowDblclick($index)">
            {{ row.c4 || "无" }}
          </div>
          <el-input
            v-else
            v-model="row.c4"
            style="width: 100%"
            :rows="10"
            type="textarea"
            placeholder="请输入"
            @blur="hiddenTextarea($index)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss">
.excel {
  padding: 10px;
}
</style> 